<template>
	<view class="search-page" v-show="selectedOption">
		<view class="search-bar-wrapper">
			<input type="text" class="search-bar" ref="textInput" @input="handleInput" @focus="showOptions"
				@blur="hideOptions" v-model='keyword' placeholder="请输入搜索内容">

			<view class="search-icon" @click="serve">
				<image src="/static/搜索.png" class="img">
			</view>
		</view>
		<view v-if="showDropdown" class="select">
			<view class="select_item" v-for="(item, index) in select" :key="index" @click="select1(item)">{{ item }}
			</view>
		</view>

		<view class="section-title">
			<text>热门搜索</text>
			<view class="toggle-icon" @click="clearSearchHistory">
				<image class="img" src='../../../static/shan.png' />
			</view>
		</view>
		<view class="section">

			<view class="search-history-wrapper">
				<view class="search-history-item" v-for="(item, index) in searchHistory" :key="index"
					@click="serve1(item)">
					{{ item }}
				</view>
			</view>
		</view>
		<view class="section-title">
			<text>周边搜索</text>
			<view class="toggle-icon" @click="toggleNearbySearch">
				<image class="img" :src="hideNearby ? '../../../static/show.png' : '../../../static/hide.png'" />
			</view>
		</view>
		<view class="section">

			<view class="nearby-search-wrapper">
				<view class="nearby-search-item" v-for="(item, index) in nearbySearch" :key="index"
					:class="{ hide: hideNearby }" @click="serve1(item)">
					<view>{{ item }}</view>
					<view class="txt">0{{index}}</view>
				</view>

			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				searchHistory: ['好看的植物', '水杯', '卫生纸', '干垃圾'], // 用户搜索记录
				nearbySearch: ['垃圾分类', '怎么识别垃圾种类', '附近垃圾回收地点'],
				hideNearby: false, // 是否隐藏周边搜索
				select: ['垃圾分类', '怎么识别垃圾种类', '附近垃圾回收地点', '首页', '商城', '拍照识别', '订单', '发现'],
				showDropdown: false,
				selectedOption: true
			};
		},

		methods: {
			handleInput(event) {
				// 处理输入框内容的变化
			},
			showOptions() {
				this.showDropdown = true; // 显示选项列表
			},
			select1(item) {
				this.keyword = item;
				console.log(item);
				this.showDropdown = false; // 隐藏选项列表

			},
			hideOptions() {
				this.showDropdown = false; // 隐藏选项列表
			},
			clearSearchHistory() {
				// 清空搜索记录
				uni.showModal({
					title: '提示',
					content: '是否清空选项？',
					success: (res) => {
						if (res.confirm) {
							this.searchHistory = []; // 清空select数组
							uni.showToast({
								title: '已清空选项',
								icon: 'none'
							});
						}
					}
				});
			},
			toggleNearbySearch() {
				// 切换显示/隐藏周边搜索

				this.hideNearby = !this.hideNearby;
			},

			serve() {
				this.selectedOption = !this.selectedOption;
				if (this.keyword == '垃圾分类') {
					uni.navigateTo({
						url: '../guide' // 替换成实际要跳转的页面路径
					});
				} else if (this.keyword == '怎么识别垃圾种类') {
					uni.navigateTo({
						url: '../guide' // 替换成实际要跳转的页面路径
					});
				} else if (this.keyword == '附近垃圾回收地点') {

				} else if (this.keyword == '首页') {

				} else if (this.keyword == '商城') {

				} else if (this.keyword == '拍照识别') {

				} else if (this.keyword == '订单') {

				} else if (this.keyword == '发现') {

				}
			},
			serve1(item) {
				console.log(item);
				this.keyword = item;
			},


		},
	}
</script>

<style lang="scss" scoped>
	.search-page {
		width: 100vw;
		height: 100vh;
		padding: 60rpx;
		color: #899989;
		// background-color:#212121;
		background-color: #fff;
	}

	.search-bar-wrapper {
		display: flex;
		border-bottom: 1px solid #000000;
		align-items: center;
		margin-bottom: 20px;
		padding: 16rpx;

		.search-bar {
			flex: 1;
		}

		.search-icon {
			margin-left: 10px;
			width: 40rpx;
			height: 40rpx;
			cursor: pointer;

			.img {
				width: 100%;
				height: 100%;
			}
		}
	}

	.section-title {
		font-weight: bold;
		font-size: 36rpx;
		color: #000000;
		display: flex;
		justify-content: space-between;
		margin-bottom: 40rpx;

		.toggle-icon {
			width: 20px;
			height: 20px;
			cursor: pointer;
			padding-top: 20rpx;

			.img {
				width: 20px;
				height: 20px;

			}
		}
	}

	.section {
		margin-bottom: 20px;

		.search-history-wrapper {
			margin-top: 10px;
			display: flex;
			flex-wrap: wrap;
		}

		.search-history-item {
			padding: 6px 12px;
			border: 1px solid #ccc;
			border-radius: 4px;
			margin-right: 10px;
			margin-bottom: 10px;
		}

		.nearby-search-wrapper {
			display: flex;
			align-items: center;
			flex-direction: column;
		}

		.nearby-search-item {
			width: 100%;
			display: flex;
			font-size: 32rpx;
			justify-content: space-between;
			margin-bottom: 30rpx;
			padding-bottom: 25rpx;
			border-bottom: 3rpx solid #ddd;

			.txt {
				font-weight: bold;
				font-size: 32rpx;
			}
		}

		.hide {
			display: none;
		}
	}

	.select {
		width: 100%;
		position: absolute;
		left: 0rpx;
		background-color: #a5a5a5;
		z-index: 100;

		.select_item {
			// width: 1000rpx;
			font-size: 32rpx;
			color: #ffffff;
			margin-top: 10rpx;
			padding-left: 20rpx;
			padding-bottom: 8rpx;
			border-bottom: 1px solid #ffffff;
		}
	}
</style>